<template>
    <div>
        <h1>父组件</h1>
        <input type="text" ref="inputRef">
        <button @click="onButtonClick">按钮</button>
        <ChildComponent ref="childRef" />

    </div>
</template>

<script setup>
import { useTemplateRef, watchEffect } from 'vue';
import ChildComponent from './ChildComponent.vue';

const inputRef = useTemplateRef('inputRef');
const childRef = useTemplateRef('childRef');

watchEffect(() => {
    // console.log(inputRef.value);
    // console.log(childRef.value?.count);
})

function onButtonClick() {
    // console.log(inputRef.value);
    // 获取子组件内部的数据
    console.log(childRef.value.count);
    console.log(childRef.value.name);
    // 调用子组件内部的方法
    childRef.value.setCount();
}


</script>

<style scoped></style>